<template>
	<view>
		<!-- 自定义标题栏 -->
		<!-- <nav-bar :back="true" bgColor="#313131" fontColor="#FFFFFF" :titleCenter="false" type="fixed" title="会员中心"></nav-bar> -->
		
		<!-- 黑色部分 -->
		<view class="my_data">
			<image src="../../static/logo.png" mode=""></image>
			<view>
				<text>{{userName}}</text>
				<text>{{vipName}}</text>
			</view>
		</view>
	
		<!-- 白色部分 -->
		<view class="vip_ml">
			<text>升级会员</text>
			
			<view class="box_3">
				<view v-for="(item,index) in ozf" :key="index" :class="active_box_3==index?'active_box_3':''" @click="ozfxx(index)">
					<view><image :src="baseURL+item.icon"></image>{{ item.name }}</view>
					<view>￥{{ item.price }}</view>
					<!-- <text>￥{{ item[2] }}</text> -->
				</view>
			</view>
			
			<!-- <view class="zdxf_view" @click="zdxfBtn()"> -->
				<!-- <image v-if="zdxf" src="../../static/active2.png" mode=""></image> -->
				<!-- <image v-if="!zdxf" src="../../static/active1.png" mode=""></image> -->
				<!-- <text>到期后自动续费</text> -->
			<!-- </view> -->
			
			<view class="qrbtn" @click="getOrderInfo">升级会员</view>
			
			<view class="detail">
				<uParse :content="htmlString" @preview="preview" @navigate="navigate" />
			</view>
			
			<!-- <text style="margin-bottom: 30upx;display: block;">高级会员特权</text>
			
			<view class="zdxf_view hytq"><image src="../../static/active1.png" mode=""></image><text>学生可以直接获取你的联系方式并与你取得沟通</text></view>
			<view class="zdxf_view hytq"><image src="../../static/active1.png" mode=""></image><text>及时获取学生的报名信息</text></view>
			<view class="zdxf_view hytq"><image src="../../static/active1.png" mode=""></image><text>查看学生的相关资料</text></view>
			<view class="zdxf_view hytq"><image src="../../static/active1.png" mode=""></image><text>学生可以直接获取你的联系方式并与你取得沟通</text></view>
			<view class="zdxf_view hytq"><image src="../../static/active1.png" mode=""></image><text>及时获取学生的报名信息</text></view> -->
		</view>
		<view class="cgts" v-if="showSuccess">
			<view>
				<image src="cglogo.png" mode=""></image>
				<text>恭喜你升级为高级会员！</text>
				<view>知道啦</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uParse from '@/components/uParse/src/wxParse.vue'
	export default{
		components: {
			uParse
		},
		data(){
			return {
				ozf:[],
				active_box_3 : 0,
				zdxf: true,
				htmlString: "",
				baseURL:this.$API.baseURL,
				showSuccess:false,
				userName:'',
				vipName:''
			}
		},
		onLoad(){
			this.getVips();
			this.getVipstatus();
			this.userName =uni.getStorageSync("phone")
			this.vipName =uni.getStorageSync("vipName")
			
			// #ifdef APP-PLUS
			/* 隐藏凸起图标 */
			var icon = plus.nativeObj.View.getViewById("icon");
			setTimeout(function() {
				if(icon){icon.hide();}
			}, 100);
			// #endif
		},
		methods:{
			//获取充值的列表
			getVips(){
				uni.showLoading({title:'加载中'})
				var _this =this
				uni.request({
					url:this.$API.getVips,
					method:"POST",
					header:this.$API.get_head(),
					complete:()=>{uni.hideLoading();},
					success: (res) => {
						if(res.data.message=='success'){
							_this.ozf = res.data.data;
							_this.htmlString = res.data.data[0].detail;
						}
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
					}
				})
			},
			//选择vip
			ozfxx : function(e){
				this.active_box_3 = e;
				this.htmlString = this.ozf[e].detail;
			},
			//购买vip
			chargeVip(){
				uni.showLoading({title:'加载中'})
				var _this =this
				uni.request({
					url:this.$API.chargeVip,
					method:"POST",
					data:{
						vipId:this.ozf[this.active_box_3].id,
						userid:uni.getStorageSync("userid"),
						price:this.ozf[this.active_box_3].price,
					},
					header:this.$API.get_head(),
					complete:()=>{uni.hideLoading();},
					success: (res) => {
						
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
					}
				})
			},
			//获取vip等级接口并缓存
			getVipstatus(){
				var _this =this
				uni.request({
					url:this.$API.getVipstatus,
					method:"POST",
					data:{
						userid:uni.getStorageSync("userid"),
					},
					header:this.$API.get_head(),
					success: (res) => {
						if(res.data.message=='success'){
							uni.setStorageSync("vip_status",res.data.data.vip_status);
							uni.setStorageSync("vipName",res.data.data.vipName);
							_this.vipName =res.data.data.vipName
						}
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
					}
				})
			},
			//调起微信支付
			getOrderInfo() {//获取支付信息
				var e = this.ozf[this.active_box_3].price;
				let _this = this;
					uni.request({
						url: this.$API.wxpay,
						method:"GET",
						data: {
							pay_price: parseInt(e * 100),
						},
						success: (result) => {
							var orderInfo = result;
							if (orderInfo.statusCode != 200) {
								uni.showModal({
									content: "获得订单信息失败",
									showCancel: false
								})
								return;
							}
							uni.requestPayment({
								provider: 'wxpay',
								orderInfo: orderInfo.data,
								success: (e) => {
									_this.chargeVip();
									_this.getVipstatus();
									uni.showModal({
										content: "支付成功",
										showCancel: false,
										success() {
											uni.navigateBack({
												delta:1
											})
										}
									});
									
								},
								fail: (e) => {
									uni.showModal({
										content: "支付失败",
										showCancel: false
									})
								},
								complete: () => {
									
								}
							})
						},
						fail: (e) => {
							// res(result)
						}
					})
			},
			
		}
	}
</script>
<style>
	.my_data{
		width: 100%;
		height: 132upx;
		background: #067aee;
		box-sizing: border-box;
		padding: 0 30upx;
	}
	.my_data image{
		width: 82upx;
		height: 82upx;
		display: block;
		float: left;
		border: 1px solid #fff;
		border-radius: 50upx;
	}
	.my_data view{
		overflow: hidden;
		height: 82upx;
		box-sizing: border-box;
		padding: 0 0 0 26upx;
	}
	.my_data text{
		display: block;
		color: #fff;
	}
	.my_data text:nth-child(1){
		font-size:32upx;
		font-weight:bold;
		line-height: 41upx;
	}
	.my_data text:nth-child(2){
		font-size:26upx;
		font-weight:400;
		line-height: 53upx;
	}
	.vip_ml{
		width: 100%;
		background: #fff;
		border-radius: 20upx;
		position: relative;
		box-sizing: border-box;
		padding: 40upx 30upx;
		top: -20upx;
	}
	.vip_ml>text{
		font-size:34upx;
		font-family:Microsoft YaHei;
		font-weight:bold;
		color:rgba(51,51,51,1);
	}
	.box_3{
		width: 100%;
		display: flex;
		margin-top: 36upx;
		margin-bottom: 50upx;
	}
	.box_3>view{
		flex: 1;
		box-sizing: border-box;
		margin: 0 7.5upx;
		border:1px solid rgba(153,153,153,1);
		border-radius:10upx;
		text-align: center;
		padding: 40upx 0;
	}
	.box_3>view>view{
		text-align: center;
		display: block;
		margin: 15upx 0;
	}
	.box_3>view image{
		width: 50upx;
		height:50upx;
		vertical-align: middle;
	}
	.box_3>view view:nth-child(1){
		font-size:30upx;
		font-family:Microsoft YaHei;
		font-weight:bold;
		color:rgba(51,51,51,1);
	}
	.box_3>view view:nth-child(2){
		font-size:40upx;
		font-family:Microsoft YaHei;
		font-weight:bold;
		color:#FF6A4D;
	}
	.box_3>view view:nth-child(3){
		font-size:32upx;
		font-family:Microsoft YaHei;
		font-weight:400;
		text-decoration:line-through;
		color:#999999;
	}
	.active_box_3{
		background: #FFF2EF;
		border-color: #FF3C3C !important;
	}
	.qrbtn{
		width: 690upx;
		height: 88upx;
		background:linear-gradient(0deg,rgba(210,174,113,1) 0%,rgba(233,207,155,1) 100%);
		border-radius:44px;
		margin: 40upx auto 50upx;
		text-align: center;
		line-height: 88upx;
		font-size:32upx;
		color: #fff;
		
	}
	.zdxf_view{
		width: 100%;
	}
	.zdxf_view image{
		width: 30upx;
		position: relative;
		top: 4upx;
		margin-right: 18upx;
		height: 30upx;
	}
	.zdxf_view text{
		font-size:30upx;
		font-weight:400;
		color:rgba(51,51,51,1);
	}
	.hytq text{
		font-size: 28upx !important;
	}
	.cgts{
		width: 100%;
		height: 100%;
		background: #007AFF;
		position: fixed;
		top:0;
		background: rgba(0,0,0,.5);
	}
	.cgts>view{
		width: 460upx;
		height: 400upx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		border-radius:10upx;
		background: #fff;
		box-sizing: border-box;
		padding: 45upx 38upx;
	}
	.cgts image{
		display: block;
		margin: 0 auto 40upx;	
		width: 154upx;
		height: 124upx;
	}
	.cgts text{
		font-size:34upx;
		font-family:Microsoft YaHei;
		font-weight:bold;
		text-align: center;
		display: block;
		width: 100%;
		margin-bottom: 45upx;
		color:rgba(66,66,66,1);
	}
	.cgts>view view{
		width:384upx;
		height:68upx;
		background:rgba(255,116,96,1);
		border-radius:34upx;
		color: #fff;
		font-size:32upx;
		text-align: center;
		line-height: 68upx;
	}
</style>